<template>
	<!-- 洗车详情 -->
	<view>
		<!-- 导航栏 -->
		<u-navbar title="洗车" bgColor="#3083FB" titleStyle="color:#fff" left-icon-color="#fff" :autoBack="true"
			placeholder></u-navbar>
		<view class="bg"></view>
		<!-- 轮播图 -->
		<view class="main">
			<view class="top">
				<view class="u-demo-block">
					<u-swiper :list="swiperList" @change="e => currentNum = e.current" :autoplay="true" height="400rpx"
						indicatorStyle="right: 20px">
					</u-swiper>
				</view>
				<!-- 店铺信息 -->
				<view class="details">
					<view class="mt title">
						车百世汽车生活馆
					</view>
					<view class="rate">
						<u-rate active-color="#fac909" gutter="0" :count="count" v-model="value"></u-rate>
						<text class="info">3分</text>
						<text class="info">销量：556</text>
					</view>
					<view class="mt info">
						营业时间：周一至周五 09:00-22:00
					</view>
					<view class="mt info">
						<view class="text">位置：山阳区人民中路32号</view> <u-icon name="map" color="#3083FB"></u-icon>
					</view>
				</view>
			</view>
			<!-- 服务 -->
			<view class="serve">
				<view class="title">服务项目</view>

				<u-radio-group v-model="radioValue" size="10" placement="row">
					<u-radio activeColor="#146CEE" :label="item.name" :name="item.name" v-for="(item, index) in actions"
						:key="index"></u-radio>
				</u-radio-group>

				<view class="price">￥199 <text class="undl">￥299</text></view>
				<view class="intro">
					这是一个服务介绍,这是一个服务介绍,这是一个服务介绍,这是一个服务介绍,这是一个服务介绍
				</view>
			</view>


			<!-- 服务评价 -->
			<view class="evaluation">
				<view class="title">服务评价</view>
				<view class="content">
					<view class="item" v-for="(el,index) in 5" :key="index">
						<view class="left">
							<view class="pic">
								<image src="/static/images/user-icon.jpg" mode="aspectFill"></image>
							</view>
						</view>
						<view class="text">
							<view class="info">
								<view class="name">
									黄**
								</view>
								<view class="time">
									2022-12-31
								</view>
							</view>
							<view class="pingfen">
								<view class="rate">
									<u-rate active-color="#fac909" gutter="0" :count="count" v-model="value"></u-rate>
								</view>
							</view>
							<view class="intro">
								洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车！！！
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 立即下单 -->
		</view>


		<view class="buy">
			<view class="">
				<u-cell-group>
					<u-cell @click="openSheet(index)" v-for="(item, index) in list" :key="index">
						<view class="title" slot="title">
							<u-icon name="server-man" size="30" color="#3083FB"></u-icon> 
							<view class="">
								联系客服
							</view>
						</view>
					</u-cell>
				</u-cell-group>
				<u-action-sheet :show="show0" @close="close" @select="select" :actions="actions0" :closeOnClickOverlay="false">
				</u-action-sheet>
				<u-action-sheet :show="show1" @close="show1 = false" :actions="actions1">
				</u-action-sheet>
				<u-action-sheet :show="show2" @close="show2 = false" :actions="actions2" cancelText="取消">
				</u-action-sheet>
			</view>
			<view class="kf">
				<u-button color="#f44444" text="立即下单"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radioValue: '',
				actions: [{
						name: '普通洗车',
					},
					{
						name: '清洗',
					},
					{
						name: '内饰清洗',
					},
					{
						name: '其他清洗',
					},
				],
				swiperList: [
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				currentNum: 0,
				// 评价
				count: 5,
				value: 3,




				show0: false,
				show1: false,
				show2: false,
				show3: false,
				show4: false,
				show5: false,
				actions0: [{
						name: '18893029302',
					},
					{
						name: '呼叫',
					},
					{
						name: '取消',

					},
				],
				actions1: [{
						name: '选项1',
					},
					{
						loading: true
					},
					{
						name: '选项被禁用',
						disabled: true
					},
				],
				actions2: [{
						name: '选项1',
					},
					{
						name: '选项2',
					},
					{
						name: '选项3',
					},
				],
				actions3: [{
						name: '选项1',
					},
					{
						name: '选项2',
					},
					{
						name: '选项3',
					},
				],
				actions5: [{
					name: '获取用户信息',
					openType: 'getUserInfo',
					color: uni.$u.color['success']
				}],
				list: [{
					title: '联系客服',
					iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/cancel.png'
				}, ]
			}
		},
		methods: {
			rightClick() {
				console.log('rightClick');
			},
			leftClick() {
				console.log('leftClick');
			},
			onLoad() {},
			// 点击cell，判断显示哪个功能
			openSheet(index) {
				// #ifndef MP
				if (index === 5) return uni.$u.toast('请在微信内预览')
				// #endif
				this[`show${index}`] = true
			},
			getuserinfo(res) {
				uni.$u.toast(`用户名：${res.userInfo.nickName}`)
			},
			navigateBack() {
				uni.navigateBack()
			},
			close() {
				console.log('close');
				this['show0'] = false
			},
			select(e) {
				console.log('select', e);
			}

		}
	}
</script>

<style lang="scss">
	.bg {
		background-color: #3083FB;
		height: 200rpx;
		margin-top: -2px;
	}

	.main {
		padding: 20rpx;
		padding-top: 30rpx;
		margin-top: -190rpx;
	}

	.top {
		padding: 25rpx;
		background-color: #ffffff;
		border-radius: 18rpx;

		.rate {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			width: 600rpx;

			.info {
				margin: 0 20rpx;
			}
		}

		.title {
			font-size: 36rpx;
		}

		.info {
			font-size: 28rpx;
			display: flex;

			.text {
				margin-right: 20rpx;
			}
		}
	}




	.buy {
		width: 750rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		position: fixed;
		bottom: 50rpx;

		.kf {
			/deep/ .u-button {
				background:linear-gradient(to right,#3789FF,#035FE0);
				color: #fff;
				border-radius: 40rpx;
				border-color: #035FE0 !important;
				width: 260rpx;
				height: 80rpx;
			}

		}
		.title{
			display: flex;
			width: 200rpx;
			align-items: center;
		}
		.u-cell {
			width: 230rpx;
			height: 80rpx;
			color: #ffffff;
		}

	}

	.content {
		margin-top: 30rpx;
	}

	.evaluation {
		padding: 20rpx;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 18rpx;
		margin-bottom: 180rpx;

		.title {
			font-size: 36rpx;
			padding: 20rpx 0;
		}

		.content {
			box-sizing: border-box;

			.item {
				display: flex;
				width: 100%;
				justify-content: flex-start;
				box-sizing: border-box;
				margin-bottom: 40rpx;

				.left {
					.pic {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}


				.text {
					flex: 1;
					padding-left: 20rpx;
					box-sizing: border-box;

					.pingfen {
						width: 100rpx;
						margin-bottom: 20rpx;
					}

					.info {
						display: flex;
						justify-content: space-between;
						margin-bottom: 10rpx;

						.time {
							color: #ccc;
							font-size: 26rpx
						}
					}

					.intro {
						font-size: 28rpx;
						line-height: 45rpx;
					}
				}

			}
		}
	}

	.serve {
		padding: 20rpx;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 18rpx;

		.title {
			font-size: 36rpx;
			padding: 20rpx 0;
		}

		.u-radio {
			margin-right: 30rpx;
		}

		.price {
			margin: 40rpx 0 20rpx;
			color: red;

			.undl {
				color: #c9c9c9;
				font-size: 28rpx;
				text-decoration: line-through;
				margin-left: 40rpx;
			}
		}

		.intro {
			font-size: 28rpx;
			line-height: 50rpx;
		}
	}

	.mt {
		margin-top: 15rpx;
		margin-bottom: 10rpx;
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}
</style>